<script setup lang="ts">
import { inject, ref } from 'vue'
import { useActiveOp } from '@renderer/views/imgViewer/hooks/useActiveOp'

const viewStatus = defineModel('viewStatus') as any
const emits = defineEmits(['rotate', 'reset'])
const {
  activeOp,
  setActiveOp
} = useActiveOp()
const volumeButtons = ref([
  {
    label: 'pan',
    value: 'pan',
    icon: 'markRaw(HandMove)'
  },
  {
    label: 'zoom',
    value: 'zoom',
    icon: 'markRaw(ZoomIn)'
  },
  {
    label: 'rotate',
    value: 'rotate3D',
    icon: 'markRaw(ZoomIn)'
  }
])

const resetButtons = ref([
  {
    label: 'all',
    value: 'resetAll'
  }
])


const handleReset = (subType) => {
  setActiveOp({
    type: 'reset',
    subType: subType
  })
  emits('reset', subType)
}

</script>

<template>
  <el-scrollbar height="450px" class="pb-[20px]">
    <div class="mb-[10px]">
              <template v-for="item in volumeButtons">
                <el-button
                  class="w-full"
                  @click="setActiveOp({
                  type:item.value,
                  subType: item.value
              })"
                  :type="activeOp.type === item.value ? 'primary':''">{{
                    item.value
                  }}
                </el-button>
              </template>
    </div>

    <div>
      <span>Reset</span>
      <template v-for="btn in resetButtons">
        <el-button
          class="w-full reset-btn"
          @click="handleReset(btn.value)"
        >{{
            btn.label
          }}
        </el-button>
      </template>
    </div>
  </el-scrollbar>
</template>

<style scoped>
.el-button {
  margin-left: 0px !important;
}
</style>
